<template>
  <div class="selimg-container">
    <!-- 选择封面按钮 -->
    <div class="sel-box" @click="isShow = true">
      <el-image :src="selImg">
        <!-- 默认没有url，使用错误提示slot作为选择素材的文案 -->
        <div slot="error" class="image-slot">
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </div>
      </el-image>
    </div>
    <!-- 弹出层=》选择封面 -->
    <el-dialog
      title="选择封面"
      append-to-body
      :visible.sync="isShow"
      width="68%"
    >
      <!-- 素材管理组件（复用） -->
      <!-- 通过getSelImg回调函数获取选中的图片 -->
      <Imgs isSel @selected="getSelImg" />
    </el-dialog>
  </div>
</template>

<script>
// 导入素材管理组件
/**
 * 设计素材管理的API=》保证默认素材管理和上传功能
 * 1. isSel => 是否支持选择 （true: 开启选择功能 false:基本功能）
 * 2. @selected 自定义事件=》获取Imgs组件选择的图片
 */
import Imgs from '@/views/image'
export default {
  props: {
    // 接收父组件传递的封面图片地址数据
    selImg: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      // 控制封面选择弹出层显示和隐藏
      isShow: false
      // // 当前子组件选中的图片
      // selImg: ''
    }
  },
  // 注册素材管理组件
  components: {
    Imgs
  },
  methods: {
    // 获取子组件确定时选中的图片
    getSelImg (img) {
      console.log('获取子组件确定时选中的图片', img)
      // 展示选中图片
      // this.selImg = img
      this.$emit('update:selImg', img)
      // 关闭弹出层
      this.isShow = false
    }
  }
}
</script>

<style lang="less" scoped>
.selimg-container {
  border: 1px solid red;
}
.sel-box {
  .el-image {
    width: 100px;
    height: 100px;
    line-height: 100px;
    border: 1px solid #eee;
    /deep/ .image-slot {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      cursor: pointer;
      i {
        font-size: 24px;
        color: #333;
      }
    }
  }
}
</style>
